import { useState, useRef, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import classNames from 'classnames';
import { delTodo, toggleTodo, updateTodo } from '../store/actions/todos';

export const TodoItem = ({ id, text, done }) => {
  // 分发action
  const dispatch = useDispatch();

  // 为每一个todo item 组件添加一个状态，是否双击过状态
  const [showEdit, setShowEdit] = useState(false);

  // 新增一个编辑输入状态
  const [todoName, setTodoName] = useState(text);

  // 准别获取编辑输入框的 DOM
  const inputRef = useRef(null);

  // 添加 effect 处理
  useEffect(() => {
    // console.log('showEdit的effect');
    // 设置编辑输入input的光标
    if (showEdit) {
      inputRef.current.focus();
    }
  }, [showEdit]); // 我这个 effect 只在 showEdit 变化的时候执行

  // 点击删除事件处理函数
  // const delHandler = (id) => {
  //   console.log('del', id);
  //   // 修改 redux 中的数据
  //   // const action = delTodo(id);
  //   // // console.log(action);
  //   // dispatch(action);
  //   // 上面代码和下面代码等价
  //   dispatch(delTodo(id));
  // };

  const handleTodoToggle = () => {
    // 改reducer中的数据
    dispatch(toggleTodo(id));
  };

  // 编辑输入key down事件处理函数
  const onUpdateTodo = (e) => {
    // 判断用户输入的是否是回车
    if (e.key === 'Enter') {
      // console.log('修改todo', todoName);
      // 发送action
      dispatch(updateTodo(id, todoName));

      // 设置编辑框显示状态
      setShowEdit(false);
    }
  };

  return (
    // 编辑时，添加类名：editing
    // <li className={(done ? 'completed' : '') + (showEdit ? 'editing' : '')}>
    // <li className={`${done ? 'completed' : ''} ${showEdit ? 'editing' : ''}`}>
    <li className={classNames({ completed: done, editing: showEdit })}>
      <div className="view">
        <input
          // id={id}
          className="toggle"
          type="checkbox"
          checked={done}
          onChange={handleTodoToggle}
        />
        <label
          // htmlFor={id}
          onDoubleClick={() => {
            console.log('双击了');
            setShowEdit(true);
          }}
        >
          {text}
        </label>
        {/* <button className="destroy" onClick={() => delHandler(id)}></button> */}
        <button
          className="destroy"
          onClick={() => dispatch(delTodo(id))}
        ></button>
      </div>
      <input
        className="edit"
        ref={inputRef}
        onBlur={() => setShowEdit(false)}
        value={todoName}
        onChange={(e) => setTodoName(e.target.value.trim())}
        onKeyDown={onUpdateTodo}
      />
    </li>
  );
};
